<template>
	<view>
		<view class="goods_info_box">
    <view class="goods_name">{{data.goods.name}}</view>
    <view class="quick_goods_info" v-if="data.quick==1">
        <view class="view1">
            <view class="flex-grow-0 flex-y-center" v-if="data.__is_member_price&&goods.min_member_price>0&&data.goods.is_negotiable!=1&&data.__user_info.level>-1">
                <text class="renminbi is_member">￥</text>
                <text class="goods_price is_member">{{data.goods.min_member_price}}</text>
                <image class="img" :src="data.__wxapp_img.dapp.member_price.url" v-if="data.goods.is_level===true"></image>
            </view>
            <view class="flex-grow-0 flex-y-center" v-else>
                <text :class="['renminbi', data.__user_info.level!=-1||data.goods.is_level===false?'is_member':'']">￥</text>
                <text :class="['goods_price', data.__user_info.level!=-1||data.goods.is_level===false?'is_member':'']">{{data.goods.min_price>0?data.goods.min_price:data.goods.price}}</text>
            </view>
            <view class="flex-row flex-y-center" style="margin-top:14upx;">
                <view class="flex-grow-0 view2">
                    <text class="original_price" v-if="data.__user_info.level>-1||!data.goods.min_member_price||data.goods.is_level===false">￥{{data.goods.original_price}}</text>
                    <view class="member_price_box" v-else>
                        <block v-if="data.__is_member_price===1">
                            <text class="member_price_title">会员价</text>
                            <text>￥{{data.goods.min_member_price>0?data.goods.min_member_price:data.goods.price}}</text>
                        </block>
                        <text class="original_price" v-else>￥{{data.goods.original_price}}</text>
                    </view>
                </view>
                <view class="flex-grow-0 view3" v-if="data.__is_sales">
                    <text class="sales_title">销量:</text>
                    <text class="sales">{{data.goods.sales}} {{data.goods.unit}}</text>
                </view>
            </view>
        </view>
        <view @tap="$emit('showDialogBtn',$event)" class="add xuanguige " :data-id="data.goods.id" v-if="data.goods.use_attr==1">
                    选规格
                    <view class="guigenum" v-if="data.goods_num>0">{{data.goods_num}}</view>
        </view>
        <block v-if="data.goods.use_attr==0">
            <view class="btn_car_num" v-if="data.goods_num>0">
                <image @tap="$emit('jian',$event)" class="carStandard" :data-id="data.goods.id" :src="data.__wxapp_img.dapp.jian.url"></image>
                <input @input="$emit('goodNumChange',$event)" class="carStandard good_num" :data-id="data.goods.id" id="num" maxlength="999" type="number" :value="data.goods_num"></input>
                <image @tap="$emit('jia',$event)" class="carStandard" :data-id="data.goods.id" :src="data.__wxapp_img.dapp.jia.url"></image>
            </view>
            <view @tap="$emit('jia',$event)" class="add add_cart" :data-id="data.goods.id" v-else>加入购物车</view>
        </block>
    </view>
    <view class="flex-row flex-y-center dapp_goods_info" v-else>
        <view class="flex-grow-1 flex-col">
            <view class="flex-grow-0 flex-y-center view1" v-if="data.__is_member_price&&data.goods.min_member_price>0&&data.goods.is_negotiable!=1&&data.__user_info.level>-1">
                <text style="font-size:16pt;color:red;" v-if="data.pageType==='INTEGRAL'">{{data.goods.integral}}积分 + </text>
                <text class="renminbi is_member" v-if="!data.goods.is_negotiable">￥</text>
                <text class="min_price is_member" v-if="data.goods.store">{{data.goods.min_price}}</text>
                <block v-else>
                    <text class="min_price is_member">{{data.goods.min_member_price}}</text>
                    <image class="img" :src="data.__wxapp_img.dapp.member_price.url" v-if="data.goods.is_level===true"></image>
                </block>
            </view>
            <view class="flex-grow-0 flex-y-center view1" v-else>
                <text style="font-size:16pt;color:red;" v-if="data.pageType==='INTEGRAL'">{{data.goods.integral}}积分 + </text>
                <block v-if="data.pageType==='STEP'">
                    <image class="step-icon" src="/static/images/detail-price.png"></image>
                    <text :class="[data.__user_info.level!=-1||data.goods.is_level===false?'is_member':'']" style="font-size:32upx;color:#ff9d1e;font-family:DIN">{{data.goods.price}}</text>
                    <text style="font-size:11pt;color:#666666;margin-left:24upx">原价：</text>
                    <text style="font-size:11pt;color:#666666;text-decoration:line-through">{{data.goods.original_price}}</text>
                </block>
                <block v-if="!data.goods.is_negotiable&&data.pageType!=='STEP'">
                    <text :class="['renminbi', data.__user_info.level!=-1||data.goods.is_level===false?'is_member':'']">￥</text>
                    <text :class="['min_price', data.__user_info.level!=-1||data.goods.is_level===false?'is_member':'']">{{data.goods.min_price>0?data.goods.min_price:data.goods.price}}</text>
                </block>
                <text class="min_price" v-else>{{data.goods.min_price}}</text>
            </view>
            <view class="flex-row flex-y-center" style="margin-top:14upx;" v-if="data.pageType!=='PINTUAN'">
                <view class="flex-grow-0 view2" v-if="!data.goods.is_negotiable&&data.pageType!=='STEP'">
                    <text class="original_price" v-if="data.__user_info.level>-1||!data.goods.min_member_price||data.goods.is_level===false">￥{{data.goods.original_price}}</text>
                    <view class="member_price_box" v-else>
                        <text v-if="data.goods.store">￥{{data.goods.price}}</text>
                        <block v-else>
                            <block v-if="data.__is_member_price===1">
                                <text class="member_price_title">会员价</text>
                                <text>￥{{data.goods.min_member_price>0?data.goods.min_member_price:data.goods.price}}</text>
                            </block>
                            <text class="original_price" v-else>￥{{data.goods.original_price}}</text>
                        </block>
                    </view>
                </view>
                <view class="flex-grow-0 view2" v-if="data.__is_sales&&data.pageType!=='INTEGRAL'&&data.goods.is_negotiable!=1&&data.pageType!=='STEP'">
                    <text class="sales" v-if="data.pageType==='MIAOSHA'">已抢：</text>
                    <text class="sales" v-else>销量：</text>
                    <text class="sales">{{data.goods.sales}} {{data.goods.unit}}</text>
                </view>
            </view>
            <view class="flex-row flex-y-center" style="margin-top:14upx;height:60upx;" v-if="data.pageType==='PINTUAN'">
                <view class="flex-grow-0 flex-row original-price">
                    <view class="flex-grow-0" style="text-decoration: line-through;" v-if="data.__user_info.level>-1||!data.goods.min_member_price||data.goods.is_level===false">¥ {{data.goods.original_price}}</view>
                    <view class="member_price_box" v-else>
                        <block v-if="data.__is_member_price===1">
                            <text class="member_price_title">会员价</text>
                            <text>￥{{data.goods.min_member_price>0?data.goods.min_member_price:data.goods.price}}</text>
                        </block>
                        <text class="original_price" v-else>￥{{data.goods.original_price}}</text>
                    </view>
                </view>
                <view class="flex-row flex-grow-0 group-descount" style="margin-left:16upx">
                    <view class="flex-grow-0 group-descount-one">
                            {{data.goods.group_num}}人拼团
                        </view>
                    <view class="flex-grow-0 group-descount-center"></view>
                    <view class="flex-grow-0 group-descount-tow">
                            拼团立省¥{{data.reduce_price}}
                        </view>
                </view>
            </view>
        </view>
        <view class="flex-grow-0" v-if="data.pageType!=='INTEGRAL'&&data.pageType!=='STEP'">
            <button @tap="$emit('showShareModal',$event)" class="share_btn c-share_btn" plain="true">
                <image class="img" src="/static/images/new/icon-share.png" style="width: 36upx;height: 36upx;"></image>
                <view class="share" style="color: #F8726B;font-size: 24upx;">分享</view>
            </button>
        </view>
				<view class="flex-grow-0" v-if="data.pageType!=='INTEGRAL'&&data.pageType!=='STEP'" style="margin-left: 30upx;">
					<navigator openType="navigate" url="/pages/cart-s/cart-s">
					<button class="share_btn c-share_btn" plain="true">
							<image class="img" src="/static/images/new/icon-cart.png" style="width: 36upx;height: 36upx;"></image>
							<view class="share" style="color: #F8726B;font-size: 24upx;">购物车</view>
					</button>
					</navigator>
				</view>
    </view>
</view>
<view class="bg-white mb-20 flex-row check-list" v-if="data.goods.service_list&&data.goods.service_list.length>0">
    <view class="check-item flex-y-center" v-for="(item,index) in data.goods.service_list" :key="item.id">
        <image :src="data.__wxapp_img.dapp.check.url"></image>
        <text>{{item}}</text>
    </view>
</view>
<view class="mb-20" v-else></view>
<view @tap="$emit('showAttrPicker',$event)" class="flex-row flex-y-center select_attrs" v-if="data.quick!=1&&!data.goods.is_negotiable&&data.__user_info.blacklist!==1">
    <view class="flex-grow-1 flex-row flex-y-center">
        <text>选择</text>
        <text class="attrs">规格</text>
    </view>
    <view class="flex-grow-0">
        <image class="img" :src="data.__wxapp_img.dapp.jiantou_r.url"></image>
    </view>
</view>
<view class="flex flex-row store_shop" v-if="data.goods.store">
    <view class="flex-grow-0 img_box">
        <image class="logo" :src="data.goods.store.logo"></image>
    </view>
    <view class="flex-grow-1">
        <view class="name">{{data.goods.store.name}}</view>
        <view class="shop_info">
            <text class="goods_num">商品数量：{{data.goods.store.goods_num}}</text>
            <text v-if="data.__is_sales">已售：{{data.goods.store.sale_num}}</text>
        </view>
    </view>
    <view class="flex-grow-0 flex-y-center">
        <navigator class="enter_shop" openType="redirect" :url="'/store/shop/shop?store_id='+data.goods.store.id">进店逛逛</navigator>
    </view>
</view>
<view :class="['share-modal', data.share_modal_active]">
    <view class="share-modal-body">
        <view class="flex-row">
            <view class="flex-grow-1 flex-x-center">
							<!-- #ifdef MP-WEIXIN -->
                <button class="share-bottom" openType="share" style="height:100%;">
                    <image :src="data.__wxapp_img.share.friend.url"></image>
                    <view>分享给朋友</view>
                </button>
							<!-- #endif -->
							<!-- #ifdef H5 -->
								<button class="share-bottom" style="height:100%;" @click="$emit('onShareWebMessage',$event)">
										<image :src="data.__wxapp_img.share.friend.url"></image>
										<view>分享给朋友</view>
								</button>
							<!-- #endif -->
            </view>
            <view class="flex-grow-1 flex-x-center">
                <view @tap="$emit('getGoodsQrcode',$event)" class="share-bottom">
                    <image :src="data.__wxapp_img.share.qrcode.url"></image>
                    <view>生成商品海报</view>
                </view>
            </view>
        </view>
        <view @tap="$emit('shareModalClose',$event)" class="share-modal-close flex-y-center flex-x-center">关闭</view>
    </view>
</view>
<view @tap="$emit('close',$event)" :class="['modal flex-row', data.hide]">
    <view class="flex-y-center" style="width:100%;height:100%;position:relative;">
        <image :src="data.__wxapp_img.dapp.close2.url" style="width:50upx;height:50upx;position:absolute;left:24upx;top:24upx"></image>
        <video autoplay="true" direction="" id="video" :src="data.url" style="height:80%"></video>
    </view>
</view>
<view :class="['goods-qrcode-modal', data.goods_qrcode_active]">
    <view class="goods-qrcode-body flex-col">
        <view class="flex-grow-1" style="position: relative">
            <view style="position: absolute;left: 0;top:0;width: 100%;height: 100%;padding: 100upx 100upx 60upx">
                <view class="goods-qrcode-box">
                    <view class="goods-qrcode-loading flex-x-center flex-y-center">
                        <view class="flex-x-center flex-col">
                            <image :src="data.__wxapp_img.system.loading2.url" style="width: 150upx;height: 150upx"></image>
                            <view style="color: #888">海报生成中</view>
                        </view>
                    </view>
                    <image @tap="$emit('goodsQrcodeClick',$event)" :class="['goods-qrcode', data.goods_qrcode?'active':'']" :data-src="data.goods_qrcode" mode="aspectFit" :src="data.goods_qrcode"></image>
                </view>
            </view>
        </view>
        <view class="flex-grow-0 flex-col flex-x-center" style="padding: 0 60upx 80upx">
            <view style="margin-bottom: 20upx;padding: 0 40upx">
                <button @tap="$emit('saveGoodsQrcode',$event)" style="background: #ff4544;color: #fff;" v-if="data.goods_qrcode">
                    保存图片
                </button>
                <button style="opacity: .4" v-else>保存图片</button>
            </view>
            <view style="color: #888;font-size: 9pt;text-align: center">保存至相册</view>
        </view>
        <view @tap="$emit('goodsQrcodeClose',$event)" class="goods-qrcode-close">
            <image :src="data.__wxapp_img.dapp.close2.url" style="width: 50upx;height: 50upx;display: block"></image>
        </view>
    </view>
</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		props:['data'],
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.goods_info_box {
    background: #fff;
    padding: 32upx 24upx;
    border-bottom: 1upx solid #eee;
}

.goods_info_box .goods_name {
    font-weight: bold;
    margin-bottom: 24upx;
    line-height: 1.7;
}

.quick_goods_info {
    height: 105upx;
}

.quick_goods_info .view1 {
    float: left;
}

.quick_goods_info .view1 .renminbi {
    font-size: 11pt;
    color: #ff4544;
}

.quick_goods_info .view1 .img {
    width: 94upx;
    height: 40upx;
    margin-left: 16upx;
}

.quick_goods_info .view1 .is_member {
    color: red;
}

.quick_goods_info .view2 {
    margin-right: 32upx;
}

.quick_goods_info .view3 .sales {
    font-size: 9pt;
    color: #888;
}

.quick_goods_info .view3 .sales_title {
    font-size: 9pt;
    color: #888;
}

.quick_goods_info .good_num {
    width: 80upx;
    text-align: center;
}

.quick_goods_info .goods_price {
    font-size: 16px;
    color: #ff4544;
}

.quick_goods_info .original_price {
    font-size: 9pt;
    color: #888;
    text-decoration: line-through;
}

.quick_goods_info .add {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28upx;
    background: #ff4544;
    color: #fff;
    font-size: 13px;
    float: right;
    margin-top: 20upx;
}

.quick_goods_info .xuanguige {
    width: 142upx;
    height: 50upx;
}

.quick_goods_info .add_cart {
    width: 192upx;
    height: 56upx;
}

.quick_goods_info .guigenum {
    position: absolute;
    width: 35upx;
    height: 25upx;
    border-radius: 40%;
    border: 1upx solid red;
    color: red;
    background: #fff;
    font-size: 16upx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 70upx;
    margin-top: -46upx;
}

.quick_goods_info .btn_car_num {
    height: 100%;
    float: right;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 32upx;
}

.quick_goods_info .btn_car_num .carStandard {
    border-radius: 100%;
    height: 44upx;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick_goods_info .member_price_box {
    font-size: 9pt;
    color: #ff4544;
    text-decoration: none;
    height: 100%;
}

.quick_goods_info .member_price_title {
    background-color: #feeeee;
    margin-right: 16upx;
}

.dapp_goods_info .view1 {
    margin-right: 32upx;
}

.dapp_goods_info .view1 .renminbi {
    font-size: 34upx;
    color: #ff4544;
}

.dapp_goods_info .view1 .min_price {
    font-size: 34upx;
    color: #ff4544;
}

.dapp_goods_info .view1 .is_member {
    color: #F8726B;
}

.dapp_goods_info .view1 .img {
    width: 94upx;
    height: 40upx;
    margin-left: 16upx;
}

.dapp_goods_info .view2 {
    margin-right: 32upx;
}

.dapp_goods_info .original_price {
    font-size: 9pt;
    color: #888;
    text-decoration: line-through;
}

.dapp_goods_info .member_price_box {
    font-size: 9pt;
    color: #ff4544;
    text-decoration: none;
    height: 100%;
}

.dapp_goods_info .member_price_title {
    background-color: #feeeee;
    margin-right: 16upx;
}

.dapp_goods_info .sales {
    font-size: 9pt;
    color: #888;
}

.dapp_goods_info .share_btn {
    line-height: normal;
    padding: 0 10upx;
    border: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    font-size: 8pt;
}

.dapp_goods_info .share_btn .img {
    width: 40upx;
    height: 40upx;
}

.dapp_goods_info .share_btn .share {
    color: #888;
}

.check-list {
    padding: 32upx 24upx 12upx 24upx;
    flex-wrap: wrap;
}

.check-item {
    margin-right: 32upx;
    font-size: 9pt;
    margin-bottom: 20upx;
}

.check-item image {
    width: 34upx;
    height: 34upx;
    margin-right: 8upx;
}

.select_attrs {
    background: #fff;
    padding: 0 24upx;
    margin-bottom: 20upx;
    height: 100upx;
}

.select_attrs .attrs {
    margin-left: 40upx;
    font-size: 9pt;
    color: #888;
}

.select_attrs .img {
    width: 16upx;
    height: 26upx;
}

.original-price {
    font-size: 8pt;
    color: #707070;
}

.group-descount {
    font-size: 7pt;
}

.group-descount-one {
    padding: 5upx 12upx;
    background-color: #feeeee;
}

.group-descount-center {
    width: 6upx;
}

.group-descount-tow {
    padding: 5upx 12upx;
    background-color: #feeeee;
}

.store_shop {
    background: #fff;
    margin-bottom: 20upx;
    padding: 24upx;
}

.store_shop .img_box {
    padding-right: 24upx;
}

.store_shop .img_box .logo {
    width: 80upx;
    height: 80upx;
    border: 1upx solid #eee;
}

.store_shop .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store_shop .shop_info {
    font-size: 9pt;
    color: #888;
}

.store_shop .goods_num {
    margin-right: 30upx;
}

.store_shop .enter_shop {
    border: 1upx solid #e3e3e3;
    border-radius: 8upx;
    padding: 10upx 20upx;
    font-size: 9pt;
    color: #888;
    display: inline-block;
}

.modal {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,1);
    z-index: 9999;
}

.modal video {
    width: 100%;
    height: 430upx;
}

.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.0);
    z-index: 1000;
    transform: translateY(100%);
    transition: background 250ms;
}

.share-modal .share-modal-body {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
    background: #f2f2f2;
    padding-top: 60upx;
    transform: translateY(100%);
    transition: transform 250ms;
}

.share-modal.active {
    transform: translateY(0);
    background: rgba(0,0,0,0.5);
}

.share-modal.active .share-modal-body {
    transform: translateY(0);
}

.share-modal .share-bottom {
    text-align: center;
    font-size: 9pt;
    margin: 0;
    padding: 0;
    margin-bottom: 60upx;
    line-height: inherit;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    display: inline-block;
}

.share-modal .share-bottom:after {
    display: none;
}

.share-modal .share-bottom image {
    width: 120upx;
    height: 120upx;
    margin-bottom: 12upx;
    border-radius: 999upx;
    border: 1upx solid #eee;
}

.share-modal .share-bottom:active image {
    opacity: 0.7;
}

.share-modal .share-modal-close {
    background: #fff;
    height: 100upx;
    border-top: 1upx solid #eee;
}

.goods-qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    padding: 40upx;
    transform: translateY(100%);
    opacity: 0.5;
    transition: opacity 250ms;
    visibility: hidden;
}

.goods-qrcode-body {
    background: #fff;
    height: 100%;
    border-radius: 10upx;
}

.goods-qrcode-modal.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.goods-qrcode-modal .goods-qrcode-box {
    height: 100%;
    position: relative;
    box-shadow: 0 0 15upx rgba(0,0,0,0.15);
}

.goods-qrcode-modal .goods-qrcode-loading {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.goods-qrcode-modal .goods-qrcode {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
}

.goods-qrcode-modal .goods-qrcode.active {
    display: block;
}

.goods-qrcode-modal .goods-qrcode-close {
    position: absolute;
    top: 40upx;
    right: 40upx;
    padding: 15upx;
}

.hide {
    display: none;
}

.step-icon {
    height: 44upx;
    width: 44upx;
    margin-right: 16upx;
}
</style>
